<template>
	<view class="page">
		<TopNav v-model="tabIndex" @menu="openDrawer" />
		<swiper class="feed" :vertical="true" :circular="true" :current="current" @change="onChange">
			<swiper-item v-for="(v, i) in list" :key="i">
				<VideoItem :src="v.src" :poster="v.poster" :author="v.author" :desc="v.desc" :avatar="v.avatar" :like="v.like" :comment="v.comment" :star="v.star" :share="v.share" />
			</swiper-item>
		</swiper>
		<BottomTabBar active="home" :badge="3" @change="onTabChange" @publish="onPublish" />
		<SideDrawer ref="drawer" @login="goLogin" @scan="onScan" @settings="onSettings" />
	</view>
</template>

<script setup>
import { ref } from 'vue'
import TopNav from '@/components/TopNav.vue'
import SideDrawer from '@/components/SideDrawer.vue'
import VideoItem from '@/components/VideoItem.vue'
import BottomTabBar from '@/components/BottomTabBar.vue'

const tabIndex = ref(5)
const current = ref(0)
const demoSources = [
    'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
	'https://media.w3.org/2010/05/sintel/trailer.mp4',
    'https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_1MB.mp4'
]
const list = ref([
    { src: demoSources[0], poster:'', author:'阿越美食', desc:'鲜椒花椒炒出香，牛肉过水嫩不柴，浇上热香翻涌来，这口巴适谁不爱！', avatar:'/static/logo.png', like:5821, comment:128, star:4301, share:1292 },
    { src: demoSources[1], poster:'', author:'美食玩家', desc:'家常小炒，开胃下饭～', avatar:'/static/logo.png', like:3201, comment:88, star:1520, share:602 },
    { src: demoSources[2], poster:'', author:'吃货日记', desc:'太香了！快收藏', avatar:'/static/logo.png', like:778, comment:45, star:233, share:90 }
])
function onChange(e){ current.value = e.detail.current }

function onTabChange(key) {
	if (key === 'home') {
		// 当前页面，无需切换
	} else if (key === 'friends') {
		uni.reLaunch({ url: '/pages/friends/index' })
	} else if (key === 'message') {
		uni.reLaunch({ url: '/pages/message/index' })
	} else if (key === 'me') {
		uni.reLaunch({ url: '/pages/me/index' })
	}
}

const drawer = ref(null)
function openDrawer(){ drawer.value?.open() }
function goLogin(){ 
	uni.navigateTo({ 
		url: '/pages/login/index' 
	}) 
}
function onScan(){ uni.scanCode({ success:res=>{ uni.showToast({ title:'已识别', icon:'success' }) } }) }
function onSettings(){ uni.showToast({ title:'打开设置', icon:'none' }) }

function onPublish(){
	uni.navigateTo({ 
		url: '/pages/publish/edit' 
	})
}
</script>

<style scoped>
.page{ width:100vw; height:100vh; background:#000; overflow:hidden; }
.feed{ width:100vw; height:100vh; }
</style>
